<template>
  <div class="index">
      <!-- 头部导航 -->
      <Header :message='weather' :list='listData' :defaultName='defaults' @getContent="Switching" />
      <!-- 大轮播 -->
      <maxSwiper :message='maxSwiper'/>
      <!-- 滑动列表 -->
      <!-- <listSwiper :message='minItem'/> -->
      <!-- 导肮列表 -->
      <TabList :message='tabList'/>
      <!-- 公告滑动列表 -->
      <NoticeSwiper :message='itemData' @getfavor="favor"/>
       <!-- 手机号码弹窗 -->
      <van-dialog
        v-model="showConfirm"
        confirmButtonColor='#FD5585'
       :beforeClose = 'verification'
      >
        <div class="tipsText">为了更好的为您服务</div>
        <div class="tipsText">请绑定您的手机号码</div>
      <van-field type='tel' clearable v-model="mobile"/>
      </van-dialog>
  </div>
</template>
<script>
import api from '../../api/api.js'
import wx from 'weixin-js-sdk'
import Header from './components/header'
import maxSwiper from './components/maxSwiper'
// import listSwiper from './components/listSwiper'
import TabList from './components/tabList'
import NoticeSwiper from './components/noticeSwiper'
import { Dialog,Field,Skeleton,Lazyload } from 'vant';
import { setTimeout } from 'timers';
export default {
  data () {
    return {
      showConfirm:false,
      infomobile: '',
      mobile: '',
      weather: {},
      ip: '',
      getcity: '',
      listData:[],
      itemData:[],
      defaults:'',
      maxSwiper : [],
      modular_selfpay:'',
      loading: true,
      tabList : [
        {
          path:'/repair',
          imgSrc:require("@/assets/images/repair.png"),
          Text: '物业报修'
        },
        {
          path:'/parcel',
          imgSrc:require("@/assets/images/parcel.png"),
          Text: '快递包裹'
        },
        {
          path:'/allPay',
          imgSrc:require("@/assets/images/allPay.png"),
          Text: '费用缴纳'
        },
        {
          path:'/guide',
          imgSrc:require("@/assets/images/guide.png"),
          Text: '办事指南'
        },
        {
          path:'/FeedBack',
          imgSrc:require("@/assets/images/feedBack.png"),
          Text: '意见反馈'
        },
        {
          path:'/community',
          imgSrc:require("@/assets/images/community.png"),
          Text: '我的社区'
        },
        {
          path:'/parkingFee',
          imgSrc:require("@/assets/images/live.png"),
          Text: '车辆费用'
        },
        {
          path:'/NoticeList',
          imgSrc:require("@/assets/images/notice.png"),
          Text: '小区公告'
        },
        {
          path:'/attestation',
          imgSrc:require("@/assets/images/feedBack.png"),
          Text: '我的门禁'
        }

      ],
    }
  },
  created() {
    this.quarters()
    this.getList()
    this.getIP()
    this.infolist()
    this.Advertisement()
    this.menu()
  },
  watch:{
    $route(to, from) {
      if(to.fullPath=='/firstIndex') {
        this.quarters()
      }
    }
  },
  methods: {
    menu(){
      window.scrollTo(0, 0)
    },
    //获取绑定小区
    quarters(){
      this.$get(api.quarters,{})
      .then((response) => {
        if(response.data.code==1){
          this.defaults = response.data.data.default_name
          this.listData = response.data.data.list
        }else if(response.data.code==0){
          this.$router.push('/myCity')
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    // 小区公告数据
    getList(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.exhibition, {
        params: {
          pageNumber: 1,
          pageSize:3
        }
      })
      .then((response) => {
        if(response.data.code===1){
          this.$toast.clear();
          this.itemData = response.data.data.list
        }
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error);
      });
    },
    // 收藏
    favor(id){
      this.$get(api.favor,{
        params: {
 　　     id: id,
          type: 'Notice'
        }
      })
      .then((response) => {
        if(response.data.code==1){
          console.log(response)
        }
      })
      .catch((error) => {
          console.log(error);
      });
    },
    getIP(){
      //获取本地IP地址
      this.ip=localStorage.getItem('Ip')
      this.getLocation()
    },
   //获取IP城市areacode
    getLocation(){
      // 百度普通定位API
      this.$jsonp('https://api.map.baidu.com/location/ip?ip='+this.ip+'&ak=hlTOCwmv7dccdMhFXZLMYr1051QD2Vqs',{})
      .then((response) => {
        if(response.status==0){
          this.getcity = response.content.address_detail.city.split('市')[0]
          this.getareacode()
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    getareacode(){
      this.$get('https://gfapi.mlogcn.com/function/v001/city?location='+this.getcity+'&items=10&area=china&key=DVlVa41T7j9ebeXWTDZK5FooZN4ypAEK',{})
        .then((response) => {
            this.areacode=response.data.areaList[0].areacode
            this.getweather()
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取天气
    getweather(){
      // this.$get('https://www.tianqiapi.com/api/?version=v1&appid=82128415&appsecret=YLqA1Jo3&city='+this.getcity,{})
      this.$get('https://gfapi.mlogcn.com/weather/v001/now?areacode='+this.areacode+'&key=DVlVa41T7j9ebeXWTDZK5FooZN4ypAEK',{})
        .then((response) => {
          // 当前天气
          this.weather=response.data.result
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 选择需切换校区
    Switching(ResidentialId){
      // 参数为子组件传递的小区id
      this.$get(api.Switching, {
        params: {
 　　     id: ResidentialId
        }
      })
      .then((response) => {
        window.location.reload();
      })
      .catch((error) => {
        console.log(error)
      });
    },
    // 顶部轮播
    Advertisement(){
      this.$get(api.Advertisement, {})
      .then((response) => {
         // console.log(9999,response.data.data)
        if(response.data.code===1){
          this.maxSwiper = response.data.data;
          // this.maxSwiper = response.data.data.reverse()
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    // 用户资料显示
    infolist(){
      this.$get(api.info, {
      })
      .then((response) => {
        if(response.data.code===1){
          this.infomobile = response.data.data.defaultMobile
          if(this.infomobile==''){
            this.showConfirm = true
          }
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    //手机验证弹窗关闭
    verification(action,done){
    var reg = /^([1][0-9]{10})$/;
      if(this.mobile==''){
        done(false)
        this.$toast('请输入手机号','top')
        return
      }else if(!reg.test(this.mobile)){
        done(false)
        this.$toast('手机格式不正确')
        return
      }
      this.$get(api.mobile, {
        params: {
          mobile: this.mobile
        }
      })
      .then((response) => {
        if(response.data.code===1){
            this.mobile = response.data.data
            let routermobile = this.mobile
            this.$toast(response.data.msg)
            this.showConfirm=false
            setTimeout(() => {
            this.$router.push({
              path: '/verification',
              query: {
                routermobile
              }
            })
          },1500);
          // window.location.reload();
        }else{
          let routermobile = this.mobile
          this.$toast(response.data.msg)
          setTimeout(() => {
          this.$router.push({
            path: '/verification',
            query: {
              routermobile
            }
          })
        },1500);
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
  },
  components: {
    Header,
    maxSwiper,
    // listSwiper,
    TabList,
    NoticeSwiper,
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]:Field,
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.index .van-field__body input{
  color: #423f72;
  caret-color:#423f72;
}
.index .van-cell{
  line-height: .15rem
}
.index .van-field__body{
  width: 88%;
  margin: .1rem auto;
  border: 1px solid #423f72;
  padding: 0.08rem 0;
  border-radius: .1rem;
}
.index .van-dialog{
  color: #423f72;
  width: 70%;
  top: 35%;
  font-weight: bold;
}
.index .van-button--large{
  height: 40px;
  line-height: 40px;
  margin-top: .1rem;
}
</style>

<style scoped>
.index{
  overflow: hidden;
}
.index .van-cell{
  padding: 0 .8rem;
}
.tipsText{
  text-align: center;
  font-size: .28rem;
}
.tipsText:nth-of-type(1){
  margin-top: .30rem;
}
</style>
